<script lang='ts' setup>
import { ref } from 'vue';

const props = defineProps([
    'record'
])

const emit = defineEmits([
    "changeAutoRecharge"
])

const showWarning = ref(false)

const changeAutoRecharge = () => {
    if (!props.record.autoRecharge) {
        showWarning.value = true
        return;
    }
    emit('changeAutoRecharge')
}

</script>
<template>
    <div class="pl-5" @click.stop="">
        <a-checkbox v-bind:checked="record.autoRecharge" @click="changeAutoRecharge"></a-checkbox>
    </div>

    <a-modal v-model:open="showWarning" title="警告" @ok="emit('changeAutoRecharge'), showWarning = false">
        <p>
            设置自动续费 请保障自己的账户有足够的金额。
        </p>
    </a-modal>
</template>

<style lang='scss' scoped></style>